<template>
  <div>
      <el-dialog :modal-append-to-body="true" :before-close="handleClose" modal
      :title="title" :visible.sync="addDialogVisible" width="50%"  @close="addDialogClosed">
        <span slot="footer" class="dialog-footer">
            <div v-if=" title === '新增用户'">
              <el-form :model="addForm"
                    :rules='addFormRules'
                    ref="addFormRef"
                    label-width="70px">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="addForm.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="addForm.password"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="addForm.email"></el-input>
              </el-form-item>
              <el-form-item label="手机" prop="mobile">
                <el-input v-model="addForm.mobile"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div v-if=" title === '修改用户'">
            <el-form :model="editform"  ref="editformRef" label-width="70px">
              <el-form-item label="用户名">
                <el-input v-model="editform.username" disabled></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="editform.email" ></el-input>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="editform.mobile" ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div v-if="title === '分配角色'" class="fenpei">
            <div>当前的用户：{{userinfo1.username}}</div>
            <p>当前的角色：{{userinfo1.role_name}}</p>
            <p>分配新角色
              <el-select v-model="selectedRoleId" placeholder="请选择">
                <el-option
                  v-for="item in rolesListinfo"
                  :key="item.id"
                  :label="item.roleName"
                  :value="item.id">
                </el-option>
              </el-select>
            </p>
          </div>
          <el-button @click="callOff">取 消</el-button>
          <el-button type="primary" @click="title == '新增用户'? addUser():(title == '修改用户'? setUserInfo():saveRoleInfo())">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { instance } from '@/utils/http'
export default {
  props: ['title', 'id', 'getuserList', 'userinfo1', 'rolesListinfo'],
  created () {
    // console.log()
    if (this.title === '修改用户') {
      this.showEditDialog()
    }
  },
  data () {
    return {
      addFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ]
      },
      addForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      editform: {},
      selectedRoleId: '',

      addDialogVisible: false
    }
  },
  methods: {
    handleClose () {
      this.$emit('change')
    },
    // 新增的
    addDialogClosed () {
      this.addForm = {}
    },
    callOff () {
      this.$emit('change')
    },
    addUser () {
      this.$refs.addFormRef.validate(async valid => {
        if (valid) {
          const { data: res } = await instance.post('/users', this.addForm)
          if (res.meta.status !== 201) {
            return this.$message.error(res.meta.msg)
          }
          this.$emit('change')
          this.addDialogClosed()
          this.getuserList()
          this.$message.success('创建成功')
        }
      })
    },
    // 修改的
    async showEditDialog () {
      // console.log(id)
      const { data: res } = await instance.get('users/' + this.id)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      // console.log(res)
      this.editform = res.data
      this.deitDialogVisible = true
    },
    async setUserInfo () {
      const { data: res } = await instance.put('users/' + this.editform.id, {
        email: this.editform.email,
        mobile: this.editform.mobile
      })
      // console.log(res)

      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.$message.success('更新成功')
      this.$emit('change')
      this.getuserList()
    },
    // 分配角色
    async saveRoleInfo () {
      if (!this.selectedRoleId) {
        return this.$message.error('请选择要分配的角色')
      }
      const { data: res } = await instance.put('users/' + this.userinfo1.id + '/role', {
        rid: this.selectedRoleId
      })
      if (res.meta.status !== 200) {
        return this.$message.error('更新角色失败')
      }
      this.getuserList()
      this.$emit('change')
      return this.$message.success('更新角色成功')
    }
  }
}
</script>

<style scoped lang="less">
.el-dialog__wrapper{
  display: block !important;
  z-index: 1;
}
.fenpei{
  display: flex;
  flex-direction: column;
  align-items:flex-start;
}
</style>
